<template>
	<div class="main">
		<div class="info-wrapper">
      <div :style="{backgroundImage: `url(${userInfo.avatar})`}" class="bg"></div>
			<div class="info-cont">
        <div class="user-info">
          <p :style="{backgroundImage: `url(${userInfo.avatar})`}" class="avatar"></p>
          <p class="name">{{userInfo.nickName}}</p>
        </div>
        <div class="meeting-info">
          <p class="meeting-item"><span class="label">累计参会</span><span class="num">{{userInfo.attendNum || 0}}次</span></p>
          <p class="meeting-item"><span class="label">最新预约</span><span class="num">{{userInfo.applyNum || 0}}次</span></p>
        </div>
      </div>
		</div>
    <div class="meeting">
      <div @click="handleJump('reservation')" class="title">
        <p class="label">最新预约</p>
        <p class="more"><span>更多</span><span class="icon"></span></p>
      </div>
      <div class="meeting-cont">
        <ul v-if="reservationList && reservationList.length" class="meeting-list">
          <MeetingItem
            v-for="(item, i) in reservationList"
            :meetingInfo="item"
            :key="i"
          />
        </ul>
        <div v-else class="not-data">暂无预约</div>
      </div>
    </div>
    <div class="meeting past">
      <div @click="handleJump('past')" class="title">
        <p class="label">往期会议</p>
        <p class="more"><span>更多</span><span class="icon"></span></p>
      </div>
      <div class="meeting-cont">
        <ul v-if="pastList && pastList.length" class="meeting-list">
          <li v-for="(item, i) in pastList" :key="i" class="meeting-item">
            <div class="meeting-info">
              <div class="info">
                <p class="title">{{item.meetingName}}</p>
                <p class="meeting-id">会议ID：{{item.meetingId}}</p>
                <p class="date">时间：{{item.meetingTime }}</p>
              </div>
              <div class="cover"></div>
            </div>
            <div class="address">
              <p>地点：{{item.meettingPlace}}</p>
            </div>
          </li>
        </ul>
        <div v-else class="not-data">暂无预约</div>
      </div>
    </div>
    <div class="more-wrapper">
      <p class="label">体验更多</p>
      <p class="icon"></p>
    </div>
    <!-- 关注二维码 -->
    <subscribe-qrcode
      v-if='showMpCode'
      @close='closeCode'>
    </subscribe-qrcode>
	</div>
</template>
<script>
import MeetingItem from './components/meetingItem.vue'
import subscribeQrcode from '@/components/subscribe-qrcode'

export default {
  components: {
    MeetingItem,
    subscribeQrcode
  },
  data () {
    return {
      showMpCode: false,
      userInfo: {},
      reservationList: [],
      pastList: []
    }
  },
  methods: {
    // 获取用户信息
    fetchUserInfo () {
      let url = `${this.SERVICE_PORTAL}/meeting/attender/${sessionStorage.getItem('appid')}/${sessionStorage.getItem('openid')}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.userInfo = data
          }
        }
      })
    },
    fetchMeetingList (type) {
      let url = `${this.SERVICE_PORTAL}/meeting/${sessionStorage.getItem('appid')}/${sessionStorage.getItem('openid')}`
      let params = {
        currentPage: 1,
        pageSize: 3
      }
      if (type === 'reservation') {
        params.meetingStatus = 1
      } else if (type === 'past') {
        params.meetingStatus = 2
      }
      this.$get(url, params).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (data && data.list && data.list.length) {
            if (type === 'reservation') {
              this.reservationList = data.list
            } else if (type === 'past') {
              this.pastList = data.list
            }
          } else {
            if (type === 'reservation') {
              this.reservationList = []
            } else if (type === 'past') {
              this.pastList = []
            }
          }
        }
      })
    },
    showCode () {
      this.showMpCode = true
    },
    closeCode () {
      this.showMpCode = false
    },
    handleJump (type) {
      // 判断用户是否关注公众号
      if (this.checkIfSubscribe() !== 1) {
        this.showCode()
        return false
      }
      switch (type) {
        case 'reservation':
        case 'past':
          this.linkTo('meetingList', { type: type })
          break
      }
    }
  },
  created () {
    // 判断用户是否关注公众号
    if (this.checkIfSubscribe() !== 1) {
      this.showCode()
      return false
    }
    this.userInfo = {
      avatar: localStorage.getItem('fansAvatar') ? localStorage.getItem('fansAvatar') : '',
      nickName: localStorage.getItem('fansNickName') ? localStorage.getItem('fansNickName') : '',
      userName: localStorage.getItem('userName') ? localStorage.getItem('userName') : ''
    }
    this.fetchUserInfo()
    this.fetchMeetingList('reservation')
    this.fetchMeetingList('past')
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  height 100vh
  overflow-y auto
  background #F9FAFB
  padding 0 0 40px
  // 公共样式
  .title
    width 100%
    line-height 20px
    display flex
    justify-content space-between
    align-items center
    padding 0 13px 0 15px
    box-sizing border-box
    .label
      font-size 18px
      font-weight 700
      color #333
    .more
      font-size 14px
      color #999
      display flex
      align-items center
      .icon
        width 14px
        height 14px
        background url('../../assets/img/ic_more@2x.png') no-repeat center/ 100%
  .info-wrapper
    width 100%
    height 140px
    position relative
    .bg
      width 100%
      height 100%
      background-size contain
      background-repeat no-repeat
      background-position center
      // background-image url(../../assets/img/logo@2x.png)
      filter bulr(14px)
      -webkit-filter blur(14px)
      // backdrop-filter blur(14px)
      // -webkit-backdrop-filter blur(14px)
      position absolute
      top 0
      left 0
    .info-cont
      width 100%
      height 100%
      background-color rgba(0, 0, 0, 0.15)
      padding 21px 15px 12px
      box-sizing border-box
      position absolute
      top 0
      left 0
      z-index 2
      overflow hidden
      .user-info
        width 100%
        display flex
        align-items center
        .avatar
          width 60px
          height 60px
          background-size cover
          background-repeat no-repeat
          background-position center
          // background-image url('../../assets/img/logo@2x.png')
          border-radius 50%
        .name
          line-height 33px
          font-size 24px
          color #eee
          margin-left 16px
      .meeting-info
        width 100%
        margin-top 26px
        display flex
        align-items center
        .meeting-item
          display inline-block
          width 100%
          line-height 21px
          &:last-of-type
            text-align right
            padding-right 8px
          .label
            font-size 15px
            color rgba(249, 250,251, 0.7)
          .num
            font-size 15px
            color #F9FAFB
            margin-left 11px
  .meeting
    width 100%
    margin-top 22px
    .meeting-cont
      width 100%
      margin-top 15px
      padding 0 15px
      box-sizing border-box
      .meeting-list
        width 100%
      .not-data
        width 100%
        height 160px
        background #fff
        line-height 160px
        text-align center
        font-size 12px
        color #B2B2B2
        border-radius 8px
    &.past
      margin-top 30px
      .meeting-cont,.meeting-list
        width 100%
        .meeting-item
          width 100%
          background #fff
          border-radius 8px
          margin-top 20px
          .meeting-info
            width 100%
            display flex
            justify-content space-between
            align-items center
            padding 17px 16px
            position relative
            &:after
              content ''
              display block
              width calc(100% - 24px)
              height 1px
              background #eee
              position absolute
              left 50%
              bottom 0
              transform translate(-50%, 0)
            .info
              width calc(100% - 108px)
              .title
                width 100%
                height 20px
                padding 0
                line-height 20px
                font-size 16px
                font-weight 700
                color #333
                noWrap()
              .meeting-id, .date
                line-height 16px
                font-size 12px
                color #999
              .meeting-id
                margin-top 14px
              .date
                margin-top 5px
            .cover
              width 84px
              height 68px
              background url('../../assets/img/banner_2@2x.png') no-repeat center / cover
              border-radius 8px
          .address
            width 100%
            padding 15px 10px
            p
              width calc(100% - 90px)
              height 16px
              line-height 16px
              font-size 12px
              color #666
              noWrap()
  .more-wrapper
    width calc(100% - 30px)
    background #fff
    padding 15px 9px 15px 15px
    border-radius 8px
    margin 30px auto 0
    display flex
    justify-content space-between
    align-items center
    .label
      height 20px
      line-height 20px
      font-size 15px
      font-weight 700
      color #333
    .icon
      width 14px
      height 14px
      background url('../../assets/img/ic_more2@2x.png') no-repeat center / 100%
</style>
